import React from 'react';
import { NetworkStatus } from '@apollo/client';
import { Box, ListBase } from '@nova-hf/ui';
import ContractsHeader from 'beta/components/contracts-header/ContractsHeader';
import { ErrorBanner } from 'beta/components/error/ErrorBanner';
import { ServiceStatus } from 'beta/components/status/ServiceStatus';
import UI from 'beta/store/ui';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import {
  ContractStatus,
  MobileInternetService,
  MobileService,
  useContractsPayerNationalIdQuery,
  useServiceQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import { ActiveContractItems } from './Overview/ActiveContractItems';
import MonthlySummary from './Overview/MonthlySummary';
import UsageSummary from './Overview/UsageSummary';

type MobileServiceContainerProps = {
  ui?: UI;
};

const MobileServiceContainer = ({ ui }: MobileServiceContainerProps) => {
  const { t } = useTranslation('services');
  const router = useRouter();
  const serviceId = typeof router?.query?.serviceId === 'string' ? router?.query?.serviceId : '';
  const customerId = typeof router?.query?.customerId === 'string' ? router?.query?.customerId : '';

  const {
    data: serviceData,
    loading: serviceLoading,
    error: serviceError,
    networkStatus,
    refetch,
  } = useServiceQuery({
    variables: {
      serviceId,
    },
    skip: !serviceId,
  });

  const service =
    serviceData?.service?.__typename === 'MobileService' ||
    serviceData?.service?.__typename === 'MobileInternetService'
      ? serviceData?.service
      : undefined;

  const mobileData: MobileService | MobileInternetService | undefined = service;

  const {
    data: contractData,
    loading: contractLoading,
    error: contractError,
  } = useContractsPayerNationalIdQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });

  const contract = contractData?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );

  const loading = serviceLoading || contractLoading;

  if (contractError || serviceError) {
    return (
      <>
        {loading && <ContractsHeader title={t('service:invoice.loading')} />}
        <ErrorBanner
          eyebrowTexts={[
            t('errors:contractList.farsimi.eyebrows.1'),
            t('errors:contractList.farsimi.eyebrows.2'),
            t('errors:contractList.farsimi.eyebrows.3'),
          ]}
          titles={[
            t('errors:contractList.farsimi.titles.1'),
            t('errors:contractList.farsimi.titles.2'),
            t('errors:contractList.farsimi.titles.3'),
          ]}
          descriptions={[
            t('errors:contractList.farsimi.descriptions.1'),
            t('errors:contractList.farsimi.descriptions.2'),
            t('errors:contractList.farsimi.descriptions.3'),
          ]}
          icon="zap"
          color={ui?.serviceColor ?? 'attention'}
          showLoading={loading || networkStatus === NetworkStatus.refetch}
          refetchButton={{
            text: t('errors:buttons.refresh'),
            icon: 'refresh',
            onClick: () => refetch(),
          }}
          loadingComponent={
            <>
              <ListBase isLoading gap={3} />
              <ListBase isLoading gap={3} />
              <ListBase isLoading />
            </>
          }
        />
      </>
    );
  }

  return (
    <Box display="flex" flexDirection="column" gap={10}>
      <ServiceStatus
        statusDetail={`${t(`status.serviceStatus.${service?.status}.title`)} (${service?.status})`}
        dotColor={service?.status === 'Active' ? 'success' : 'warning'}
      />
      <UsageSummary
        contractId={''}
        nationalId={mobileData?.user?.nationalId || ''}
        color={ui?.serviceColor ?? 'pink'}
      />
      <ActiveContractItems color={ui?.serviceColor} />
      <MonthlySummary
        color={ui?.serviceColor ?? 'pink'}
        subscriptionId={mobileData?.phoneNumber || ''}
        payerNationalId={contract?.payer.nationalId || ''}
      />
    </Box>
  );
};

export default inject('ui')(observer(MobileServiceContainer));